<template>
  <div class="user">
    <!-- 新增按钮开始 -->
    <el-button
      style="margin-bottom: 0.5em; margin-right: 0.5em"
      type="primary"
      size="mini"
      plain
      @click="showHandler()"
      >添加</el-button
    >
    <!-- 新增按钮结束 -->
    <!-- 查询输入框开始 -->
    <el-input
      placeholder="请输入用户名"
      size="mini"
      style="width: 200px; margin-right: 0.5em"
    ></el-input>
    <el-select size="mini" v-model="value" placeholder="请选择状态">
      <el-option
        v-for="item in option"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select size="mini" v-model="value" placeholder="请选择角色">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 查询输入框结束 -->
    <!-- 查询按钮开始 -->
    <el-button
      style="margin-bottom: 0.5em; margin-left: 0.5em"
      type="primary"
      size="mini"
      plain
      >查询</el-button
    >
    <!-- 查询按钮结束 -->
    <!-- 表格开始 -->
    <el-table :data="userRoles" style="width: 100%; font-size: 12px">
      <el-table-column
        label="序号"
        type="index"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
      ></el-table-column>
      <el-table-column prop="realname" label="姓名" align="center">
      </el-table-column>
      <el-table-column
        prop="roles[0].name"
        label="角色"
        align="center"
      ></el-table-column>
      <el-table-column prop="gender" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column prop="telephone" label="手机号" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <span style="cursor: pointer">设置&nbsp;</span>
          <span
            @click="editHandler(scope.row)"
            style="color: #6bb3ff; cursor: pointer"
            >编辑&nbsp;</span
          >
          <span
            @click="deleteHandler(scope.row.id)"
            style="color: #e97382; cursor: pointer"
            >删除&nbsp;</span
          >
          <span style="cursor: pointer">详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="this.list.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <!-- form开始 -->
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username" required>
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname" required>
          <el-input v-model="ruleForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" required>
          <el-input type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" required>
          <template>
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="角色" prop="num" required>
          <template>
            <el-radio v-model="radio1" label="1">员工</el-radio>
            <el-radio v-model="radio1" label="2">管理员</el-radio>
            <el-radio v-model="radio1" label="3">顾客</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input type="telephone" v-model="ruleForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birth">
          <!-- <el-input v-model="ruleForm.birth"></el-input> -->
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- form结束 -->
      <div slot="footer" size="small" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="submitHandler"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      option: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "禁用",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "员工",
        },
        {
          value: "选项2",
          label: "管理员",
        },
        {
          value: "选项3",
          label: "顾客",
        },
      ],
      value: "",
      value1: "",
      radio: "",
      radio1: "",
      dialogFormVisible: false,
      list: {
        page: 1,
        pageSize: 10,
      },
      ruleForm: {},
      title: "添加用户信息",
      currentPage: 1,
    };
  },
  computed: {
    ...mapState("userRoles", ["userRoles", "total"]),
  },
  methods: {
    ...mapActions("userRoles", [
      "findAllUserRoles",
      "saveUserRole",
      "deleteUserRole",
    ]),
    changeHandler(page) {
      this.list.page = page;
      this.findAllUserRoles(this.list);
    },
    handleSizeChange(val) {
      this.list.pageSize = val;
      this.findAllUserRoles(this.list);
    },
    handleCurrentChange(val) {
      this.list.page = val;
      this.findAllUserRoles(this.list);
    },
    // 去添加用户信息
    showHandler() {
      this.dialogFormVisible = true;
    },
    // 提交保存
    submitHandler() {
      this.saveUserRole(this.ruleForm).then((res) => {
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.findAllUserRoles();
          this.$message({
            type: "success",
            message: res.message,
          });
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      });
    },
    // 编辑用户信息
    editHandler(data) {
      this.title = "编辑用户信息";
      this.ruleForm = data;
      this.dialogFormVisible = true;
    },
    // 删除用户信息
    deleteHandler(id) {
      let params = {
        id,
      };
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示",{
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteUserRole(params).then((res) => {
          if (res.status == 200) {
            this.findAllUserRoles();
            this.$message({
              type: "success",
              message: res.message,
            });
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
      })
    },
  },
  created() {
    this.findAllUserRoles(this.list);
  },
};
</script>

<style>
</style>
